<template>
    <div class="headlineSelection">
        <header ><div>头条精选</div> <div class="moreText">更多 <van-icon name="arrow" class="round"/></div></header>
        <ul class="outBoxUl">
            <li v-for="(item,index) in headLineData" :key="index" class="forOutBox" @click="goSharePage(item.articleId)">
                <div class="headLineImgBox"> <img :src="item.bannerImgUrl" alt=""></div>
                <div class="title">{{item.title}}</div>
            </li>
        </ul>
       
    </div>
</template>
 <script>
import { getHeadlineSelection } from "../../../api/index-api";

 export default {
     name:"HeadlineSelection",
     data () {
         return {
             headLineData:null,//渲染列表数据
         }
     },
     methods: {
         goSharePage(data){
             this.$router.push({
                 path:"/SharePage?id="+data 
             })
         }
     },
     created () {
         getHeadlineSelection().then(res=>{
            if(res.code===0){
                console.log(res)

             this.headLineData=res.rows.slice(0,6)


            }
         })
     }

 }
 </script>
 <style scoped lang="less">
.headlineSelection{
    margin-top: 20px;
}
 .outBoxUl{
     display:flex;
     flex-wrap: wrap;
 }
.forOutBox{
    width: 50%;
    margin-top: 20px;
    .headLineImgBox{
        width:100%;
        img{
            width: 90%;
            margin-left: 10px;
        }
    }
}
.title{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    font-size:14px;
    margin-left:10px; 
}
 header{
   text-align: center;
   font-size: 24px;
   border-bottom: 2px solid #e8e8e8;
   padding: 15px 0;
   position: relative;
 }
 .round{
   
   vertical-align: middle;
 }
  .moreText{
   position: absolute;
   right: 5%;
   top: 34%;
   font-size: 14px;
       color: #999;
 }
 </style>
